document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('colorWheel');
    const ctx = canvas.getContext('2d');
    const colorSelector = document.querySelector('.color-selector');
    const brightnessSlider = document.getElementById('brightness');
    const hexInput = document.getElementById('hex');
    const rgbInput = document.getElementById('rgb');
    const hslInput = document.getElementById('hsl');
    const hsvInput = document.getElementById('hsv');
    
    let selectedColor = { h: 0, s: 100, v: 100 };
    let isDragging = false;
    
    // 绘制圆形调色盘
    function drawColorWheel() {
        const radius = canvas.width / 2;
        const center = radius;
        
        for (let angle = 0; angle < 360; angle += 1) {
            const startAngle = (angle - 2) * Math.PI / 180;
            const endAngle = angle * Math.PI / 180;
            
            for (let r = 0; r < radius; r += 1) {
                const saturation = r / radius * 100;
                const hue = angle;
                
                ctx.beginPath();
                ctx.moveTo(center, center);
                ctx.arc(center, center, r, startAngle, endAngle);
                ctx.closePath();
                
                const color = hsvToRgb(hue, saturation, 100);
                ctx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`;
                ctx.fill();
            }
        }
    }
    
    // HSV 转 RGB
    function hsvToRgb(h, s, v) {
        h = h % 360;
        s = s / 100;
        v = v / 100;
        
        const c = v * s;
        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
        const m = v - c;
        
        let r, g, b;
        
        if (h >= 0 && h < 60) {
            [r, g, b] = [c, x, 0];
        } else if (h >= 60 && h < 120) {
            [r, g, b] = [x, c, 0];
        } else if (h >= 120 && h < 180) {
            [r, g, b] = [0, c, x];
        } else if (h >= 180 && h < 240) {
            [r, g, b] = [0, x, c];
        } else if (h >= 240 && h < 300) {
            [r, g, b] = [x, 0, c];
        } else {
            [r, g, b] = [c, 0, x];
        }
        
        return {
            r: Math.round((r + m) * 255),
            g: Math.round((g + m) * 255),
            b: Math.round((b + m) * 255)
        };
    }
    
    // RGB 转 HSL
    function rgbToHsl(r, g, b) {
        r /= 255;
        g /= 255;
        b /= 255;
        
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;
        
        if (max === min) {
            h = s = 0;
        } else {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            
            h /= 6;
        }
        
        return {
            h: Math.round(h * 360),
            s: Math.round(s * 100),
            l: Math.round(l * 100)
        };
    }
    
    // RGB 转 HSV
    function rgbToHsv(r, g, b) {
        r /= 255;
        g /= 255;
        b /= 255;
        
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        const d = max - min;
        let h;
        
        if (d === 0) {
            h = 0;
        } else {
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        
        return {
            h: Math.round(h * 360),
            s: Math.round(max === 0 ? 0 : (d / max) * 100),
            v: Math.round(max * 100)
        };
    }
    
    // 更新颜色显示
    function updateColorDisplay() {
        const { h, s, v } = selectedColor;
        const brightness = parseInt(brightnessSlider.value) / 100;
        const adjustedV = v * brightness;
        
        // 计算各种颜色格式
        const rgb = hsvToRgb(h, s, adjustedV);
        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
        const hsv = { h, s, v: adjustedV };
        
        // 更新背景颜色
        document.body.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
        
        // 更新颜色值显示
        hexInput.value = `#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
        rgbInput.value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
        hslInput.value = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
        hsvInput.value = `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
    }
    
    // 获取调色盘上的颜色
    function getColorAtPosition(x, y) {
        const radius = canvas.width / 2;
        const center = radius;
        const dx = x - center;
        const dy = y - center;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        if (distance > radius) return null;
        
        let angle = Math.atan2(dy, dx) * 180 / Math.PI;
        if (angle < 0) angle += 360;
        
        const saturation = Math.min(100, (distance / radius) * 100);
        
        return {
            h: angle,
            s: saturation,
            v: 100
        };
    }
    
    // 更新选择器位置
    function updateSelectorPosition(h, s) {
        const radius = canvas.width / 2;
        const center = radius;
        const angle = h * Math.PI / 180;
        const distance = (s / 100) * radius;
        
        const x = center + distance * Math.cos(angle);
        const y = center + distance * Math.sin(angle);
        
        colorSelector.style.left = `${x}px`;
        colorSelector.style.top = `${y}px`;
    }
    
    // 事件监听
    canvas.addEventListener('mousedown', (e) => {
        isDragging = true;
        handleColorSelection(e);
    });
    
    canvas.addEventListener('mousemove', (e) => {
        if (isDragging) {
            handleColorSelection(e);
        }
    });
    
    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
    
    brightnessSlider.addEventListener('input', updateColorDisplay);
    
    function handleColorSelection(e) {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        const color = getColorAtPosition(x, y);
        if (color) {
            selectedColor = color;
            updateSelectorPosition(color.h, color.s);
            updateColorDisplay();
        }
    }
    
    // 初始化
    drawColorWheel();
    updateSelectorPosition(selectedColor.h, selectedColor.s);
    updateColorDisplay();
});
var eleH = document.querySelector('input[name="h"]');
var eleW = document.querySelector('input[name="w"]');
var eleB = document.querySelector('input[name="b"]');

var setColor = function () {
    canvas.style.backgroundColor = 'hsl('+ eleH.value +' '+ eleW.value +'% '+ eleB.value +'%)';
};

setColor();

form.addEventListener('input', setColor);